<template>
  <el-col :span="22" :offset="1">
<!--    <el-card style="margin-bottom: 10px">-->

<!--    </el-card>-->
    <el-card>
      <el-table
        :data="clients"
        style="width: 100%"
        max-height="370">
        <el-table-column
          fixed
          prop="cName"
          label="客户名"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="cId"
          label="客户id"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="cPhoneNumber"
          label="手机联系方式"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="cTel"
          label="座机联系方式"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="cQNumber"
          label="qq联系方式"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="cEmail"
          label="邮箱"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="cUsername"
          label="客户昵称"
          width="auto">
        </el-table-column>

        <el-table-column
          prop="cUnit"
          label="客户单位"
          width="auto">
        </el-table-column>

        <el-table-column
          label=" "
          width="80">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.$index,clients)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template>
        <el-dialog title="修改客户信息"  width="40%" :visible.sync="dialogFormVisible">
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item size="small" label="客户名">
              <el-input size="small" v-model="form.cName"></el-input>
            </el-form-item>
            <el-form-item size="small" label="手机联系方式">
              <el-input size="small" v-model="form.cPhoneNumber"></el-input>
            </el-form-item>
            <el-form-item size="small" label="座机联系方式">
              <el-input size="small" v-model="form.cTel"></el-input>
            </el-form-item>
            <el-form-item size="small" label="qq联系方式">
              <el-input size="small" v-model="form.cQNumber"></el-input>
            </el-form-item>
            <el-form-item size="small" label="邮箱">
              <el-input size="small" v-model="form.cEmail"></el-input>
            </el-form-item>
            <el-form-item size="small" label="昵称">
              <el-input size="small" v-model="form.cUsername"></el-input>
            </el-form-item>
            <el-form-item size="small" label="单位">
              <el-input size="small" v-model="form.cUnit"></el-input>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="saveEdit">确认修改</el-button>
            <!--                <el-button type="primary" @click="dialogFormVisible = false">确认修改</el-button>-->
          </div>
        </el-dialog>
      </template>
    </el-card>
    <el-card style="margin-bottom: 10px">
      <el-button type="info" style="margin-left: 10px" @click="print">打印客户信息报表</el-button>
    </el-card>
  </el-col>
</template>

<script>
  import Global from '../../utils/global'

  export default {
    name: 'ClientManage',
    data(){
      return{
        idx:-1,
        form:{
          cName:null,
          cId:null,
          cTel:null,
          cPhoneNumber: null,
          cQNumber:null,
          cEmail: null,
          cUsername: null,
          cUnit:null,
          cPwd:null
        },
        dialogFormVisible: false,
        glo:new Global,
        clients:[
        ],
      }
    },
    methods:{
      print(){
        var timestamp = (new Date()).valueOf();
        var token = md5("epms" + timestamp);
        window.open("http://47.92.227.185:8080/download/clientCsv?token="+token+"&timestamp="+timestamp)
        // var data = {}
        // this.glo.sendDate(this.glo.server+'download/wageCsv',data,null,"POST")
      },
      handleEdit(index,clients) {
        this.idx = index;
        this.form = clients[index];
        this.dialogFormVisible = true;
        // this.glo.sendDate(this.glo.server + "frontDesk/getAllClient", data, this.handleRes,"POST")
      },
      saveEdit() {
        this.clients[this.idx] = this.form;
        var client = this.form
        this.glo.sendDate(this.glo.server + "frontDesk/updateClientInfo", client, this.handleResEdit,"POST")
        this.dialogFormVisible = false;
        console.log(this.clients)
      },
      handleResEdit(res){
        console.log(res)
        let feedBack = eval(res);
        console.log(feedBack)
        if (feedBack.code == 20000) {
          this.$message.success(`第 ${this.idx + 1} 行记录修改成功`);
        }else{
          this.$message.error(`修改失败`);
          location.reload()
        }
      },

      inserTable (line) {
        if(!line.cTel){
          line.cTel="未填写"
        }
        if(!line.cQNumber){
          line.cQNumber="未填写"
        }
        if(!line.cUnit){
          line.cUnit="未填写"
        }
        this.clients.push(
          {
            cName: line.cName,
            cId:line.cId,
            cTel:line.cTel,
            cPhoneNumber: line.cPhoneNumber,
            cQNumber:line.cQNumber,
            cEmail: line.cEmail,
            cUsername: line.cUsername,
            cUnit: line.cUnit,
            cPwd: line.cPwd,
          }
        )
      },
      initProjectPage (res) {

        for (var line in res.data.clientList){
          this.inserTable(res.data.clientList[line])
        }
      },
      handleRes (res) {
        console.log(res);
        let feedBack = eval(res);
        if (feedBack.success == false) {//登录失败
          this.$message("客户获取失败");
          return;
        }
        this.$message.success("客户获取成功^^")
        this.initProjectPage(feedBack)
      },

      getAllClient () {
        var data = {
        }
        this.glo.sendDate(this.glo.server + "frontDesk/getAllClient", data, this.handleRes,"POST")
      },

    },

    mounted(){
      this.getAllClient()
    }
  }


</script>

<style scoped>

</style>
